HTML 链接（超链接）

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
可以通过使用<a>标签在 HTML 中创建链接，有两种使用<a>标签的方式：

通过使用 href 属性 - 创建指向另一个文档的链接

通过使用 name 属性 - 创建文档内的书签

URL 格式

格式说明：

协议（protocol）：指定使用的传输协议，如https、http、file等

主机名（host）：指存放资源的服务器的域名系统（DNS）主机名或IP地址

端口号（port）：整数，可选，省略时使用方案的默认端口，各种传输协议都有默认的端口号，如http的默认端口为80

路径（path）：由零或多个“/”符号隔开的字符串，一般用来表示主机上的一个目录或文件地址

查询（query）：可选，用于给动态网页（如使用CGI、ISAPI、PHP/JSP/ASP/ASP。NET等技术制作的网页）传递参数，可有多个参数，用“&”符号隔开，每个参数的名和值用“=”符号隔开

信息片段（fragment）：字符串，用于指定网络资源中的片断。例如一个网页中有多个名词解释，可使用fragment直接定位到某一名词解释

HTML 链接语法

1	<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>

说明：

href 属性规定链接的目标

“链接文本” 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

页面内链接（锚点）

name属性规定锚点的名称。当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接。

<h1>锚点</h1>
<p><a href="#test">到test</a></p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p id="test">test</p>
<p><a href="#">回顶部</a></p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>
<p>0</p> <p>0</p> <p>0</p>

说明：可以使用id属性来代替name属性，命名锚同样有效

链接目标

通过target属性，可以定义被链接的文档在何处显示。

值	描述
_blank	在新窗口中打开被链接文档
_self	默认。在相同的框架中打开被链接文档
_parent	在父框架集中打开被链接文档
_top	在整个窗口中打开被链接文档
framename	在指定的框架中打开被链接文档

<a href="http://www.w3.org" target="_self">W3C（当前窗口）</a>
<a href="http://www.w3.org" target="_blank">W3C（新窗口）</a>
<a href="http://www.w3.org" target="abc">W3C（abc）</a>
<a href="http://www.example.com" target="abc">Example（abc）</a>

链接Email地址

<a>标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件。

注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。

相对路径和绝对路径

链接中的特殊符号及其代表的意义

符号	描述
`.`	代表目前所在目录，相对路径
`..`	代表上一级目录，相对路径
`../../`	代表上一级目录的上一级目录，相对路径
`/`	代表根目录，绝对路径

在使用相对路径时，使用.来表示当前目录，使用..来表示当前目录的父目录。

HTML 图像

在 HTML 中，图像由 <img> 标签定义，<img> 标签是空标签，只包含属性，没有闭合标签。
定义图像的语法：<img src="url" />，src属性的值为图像的URL地址。

1 2	<img src="/path/to/img.jpg" alt="替代文字" title="鼠标滑过提示文本" width="300" height="200">

说明：alt属性规定了图像的替代文本。width和height属性设置了图像的大小，其值可以为pixels或%。

<img> 标签通常配合<figure> 标签一起使用来表示图像。
<figure> 标签规定了独立的流内容，如图像、图表、照片、代码等等。

<figure>
    <img src="/path/to/img.png" alt="替代文字">
    <figcaption>图片说明</figcaption>
</figure>

说明：<figcaption>元素为figure添加标题（caption）

HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格标签

表格	描述
`<table>`	定义表格
`<caption>`	定义表格标题
`<th>`	定义表格的表头
`<tr>`	定义表格的行
`<td>`	定义表格单元
`<thead>`	定义表格的页眉
`<tbody>`	定义表格的主体
`<tfoot>`	定义表格的页脚
`<col>`	定义用于表格列的属性
`<colgroup>`	定义表格列的组

实例

<table border="1">
  <thead>
    <tr>
      <th>浏览器</th>
      <th>渲染引擎</th>
      <th>JavaScript 引擎</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Chrome</th>
      <td>Blink</td>
      <td>V8</td>
    </tr>
    <tr>
      <th>Opera</th>
      <td>Blink</td>
      <td>V8</td>
    </tr>
    <tr>
      <th>Firefox</th>
      <td>Gecko</td>
      <td>SpiderMonkey</td>
    </tr>
    <tr>
      <th>Edge</th>
      <td>EdgeHTML</td>
      <td>Chakra</td>
    </tr>
  </tbody>
</table>

效果

浏览器	渲染引擎	JavaScript 引擎
Chrome	Blink	V8
Opera	Blink	V8
Firefox	Gecko	SpiderMonkey

说明：

合并行：在<td>标签中设置rowspan属性可以规定单元格可横跨的行数

合并列：在<td>标签中设置colspan属性可以规定单元格可横跨的列数

若要设置<caption>，其必须是<table>的第一个元素

若需要对全部列应用样式，<colgroup>标签将会很有用

当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示

设置表格的摘要：<table summary="表格简介文本">，摘要的内容不会在浏览器中显示出来，它的作用是增加表格的可读性，使搜素引擎更好的读懂表格内容。

参考资料

w3school